<template>
  <div>
    <!-- 渲染内容图片 -->
    <div class="calass">
      <div class="imgbox" v-for="(_rawValue, id) in tableData" :key="id">
        <div>
          <img :src="_rawValue.img" alt="">
        </div>
        <div class="prdtTags"></div>
        <div class="bd">
          <h4 class="name"><a href="#">{{ _rawValue.name }}</a></h4>
        </div>
        <div class="Pricebox"><span>{{ _rawValue.Discount }}</span>
          <span class="Price2">{{ _rawValue.Price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';


// setup() {
const tableData = ref([])


function loadList() {
  axios.get('http://localhost:3001/users').then(res => {
    tableData.value = res.data
  })


}

onMounted(() => {
  loadList()

})

// async function loadList() {
//   const { res } = await axios.get('http://localhost:3001/users')
//   console.log(res);
//   console.log(12121);
// }

</script>

<style  lang="less" scoped>
.calass {
  display: flex;
  justify-content: space-between;
}

.imgbox {
  width: 265px;
  height: 100%;
  min-height: 1px;

  img {
    width: 265px;
    height: 265px;
  }

  .prdtTags {
    height: 20px;
    font-size: 0;
    color: #fff;
    width: 200px;
    margin: 0 auto 3px;
    overflow: hidden;
  }

  .bd {
    width: 265px;
    width: 92px;

    .name {
      width: 166px;
      margin-left: 45px;
      max-height: 40px;
      line-height: 20px;
      text-align: center;
    }

  }

  .Pricebox {
    width: 100%;
    margin-top: 10px;
    text-align: center;

    .Price2 {
      margin-left: 10px;
      color: #999999;
      text-decoration: line-through
    }
  }
}
</style>